<template xmlns="http://www.w3.org/1999/html">
  <div class="select-none">
    <img :src="bg" class="wave"/>
    <div class="container">
      <div class="img">
        <img src="../../assets/img/bg.svg">
      </div>
      <div class="login-box">
        <div class="login-form">
          <img src="../../assets/img/logo.svg" class="avatar">
          <el-form
              v-if="currentPage === 0"
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              size="large"
          >
            <el-form-item>

              <el-input
                  clearable
                  v-model="loginForm.username"
                  placeholder="账号"
                  prefix-icon="el-icon-user"
                  class="tet"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                  clearable
                  show-password
                  v-model="loginForm.password"
                  placeholder="密码"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item prop="verifyCode">
              <div class="w-full h-[20px] flex justify-between items-center">
                <el-input
                    clearable
                    auto-complete="false"
                    v-model="loginForm.code"
                    placeholder="验证码"
                    prefix-icon="el-icon-key"
                    style="width: 230px;margin-right: 10px"
                ></el-input>
                <img :src="kaptchaUrl" @click="updateKaptcha" style="cursor: pointer;width: 100px;height: 40px"/>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="w-full h-[20px] flex justify-between items-center">
                <el-checkbox
                    v-model="loginForm.isRem"
                >
                  记住密码
                </el-checkbox>
                <el-button
                    link
                    type="text"
                    style="color: #38d39f"
                    @click="toUpdate()"
                >
                  忘记密码？
                </el-button>
              </div>
              <el-button
                  class="w-full mt-4"
                  size="default"
                  style="background: #38d39f;border-color: #38d39f"
                  type="primary"
                  :loading="load"
                  @click="onLogin()"
              >
                登录
              </el-button>
            </el-form-item>
            <el-form-item>
              <div class="w-full flex justify-between items-center" style="margin-top: 0px">
                <el-button
                    class="w-full"
                    size="default"
                    plain
                    @click="toRegist()"
                >
                  注册
                </el-button>
              </div>
            </el-form-item>
          </el-form>


          <!--          跳转到注册页-->
          <el-form
              v-if="currentPage === 1"
              ref="registerFormRef"
              :model="registerForm"
              size="large"
              :rules="registerRules"
          >
            <el-form-item>
              <el-input
                  clearable
                  v-model="registerForm.username"
                  placeholder="账号"
                  prefix-icon="el-icon-user"
              />
            </el-form-item>

            <el-form-item prop="phone">
              <el-input
                  clearable
                  v-model="registerForm.phone"
                  placeholder="手机号码"
                  prefix-icon="el-icon-mobile"
              />
            </el-form-item>

            <el-form-item>
              <div class="w-full flex justify-between">
                <el-input
                    clearable
                    v-model="registerForm.code"
                    placeholder="短信验证码"
                    prefix-icon="el-icon-key"
                />
                <el-button
                    class="ml-2"
                    @click="getRegisterCode()"
                    plain
                    :disabled="registerMsg"
                >
                  {{
                    registerMsg ? this.count + 's后获取' : this.msgBtn
                  }}
                </el-button>
              </div>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                  clearable
                  show-password
                  v-model="registerForm.password"
                  placeholder="密码"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item prop="repeatPassword">
              <el-input
                  clearable
                  show-password
                  v-model="registerForm.repeatPassword"
                  placeholder="确定密码"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                  class="w-full"
                  size="default"
                  type="primary"
                  style="background: #38d39f;border-color: #38d39f"
                  :loading="loadRe"
                  @click="onRegister()"
              >
                确定
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-button
                  class="w-full"
                  size="default"
                  plain
                  @click="onBack">
                返回
              </el-button>
            </el-form-item>
          </el-form>

          <!--跳转到忘记密码页面-->
          <el-form
              v-if="currentPage === 2"
              ref="updateFormRef"
              :model="updateForm"
              size="large"
              :rules="updateRules"
          >
            <el-form-item>
              <el-input
                  clearable
                  v-model="updateForm.phone"
                  placeholder="手机号码"
                  prefix-icon="el-icon-mobile"
              />
            </el-form-item>

            <el-form-item>
              <div class="w-full flex justify-between">
                <el-input
                    clearable
                    v-model="updateForm.code"
                    placeholder="短信验证码"
                    prefix-icon="el-icon-key"
                />
                <el-button
                    class="ml-2"
                    @click="getLoginCode()"
                    plain
                    :disabled="forgetMsg"
                >
                  {{
                    forgetMsg ? this.count + 's后获取' : this.msgBtn
                  }}
                </el-button>
              </div>
            </el-form-item>

            <el-form-item>
              <el-input
                  clearable
                  show-password
                  v-model="updateForm.password"
                  placeholder="密码"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                  clearable
                  show-password
                  v-model="updateForm.repeatPassword"
                  placeholder="重复密码"
                  prefix-icon="el-icon-lock"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                  class="w-full"
                  size="default"
                  style="background: #38d39f;border-color: #38d39f"
                  type="primary"
                  :loading="loadUp"
                  @click="onUpdate(ruleFormRef)"
              >
                确定
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-button
                  class="w-full"
                  size="default"
                  plain
                  @click="onBack">
                返回
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {checkPhone, isPhoneExist, sendMsg} from "@/api/user";

const TIME_COUNT = 60;

export default {
  name: "Login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.confirmPwd !== '') {
          this.$refs.ruleForm.validateField('confirmPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      bg: require("../../../src/assets/img/wave.png"),
      currentPage: 0,
      loginForm:
          {
            username: "",
            password: "",
            code: "",
            isRem: false
          },
      loginRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      load: false,
      kaptchaUrl: "/kaptcha?time=" + new Date(),
      loadRe: false,
      registerForm: [
        {
          username: "",
          phone: "",
          code: "",
          password: "",
          repeatPassword: ""
        }
      ],
      registerRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        repeatPassword: [
          {
            required: true,
            message: "重复密码不能为空",
            trigger: "blur",
          },
          {
            validator: validatePass2,
            trigger: 'blur',
            required: true
          }
        ]
      },
      loadUp: false,
      updateForm: [
        {
          phone: "",
          code: "",
          password: "",
          repeatPassword: ""
        }
      ],

      updateRules: {
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        repeatPassword: [
          {
            required: true,
            message: "重复密码不能为空",
            trigger: "blur",
          },
          {
            validator: validatePass2,
            trigger: 'blur',
            required: true
          }
        ]
      },
      registerMsg: false,
      count: 0,
      timer: null,
      forgetMsg: false,
      msgBtn: "发送验证码"
    }
  },
  methods: {
    toUpdate() {
      this.currentPage = 2
    },
    onLogin() {
      this.load = true;
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          this.$store.dispatch("user/login", this.loginForm).then(() => {
            this.load = false;
            // 跳转到后台首页
            this.$router.push("/dashboard");
          });
        } else {
          this.$message.error("请输入所有内容");
          this.load = false;
          return false;
        }
      });
    },
    // 点击图片更换验证码
    updateKaptcha() {
      this.kaptchaUrl = "/kaptcha?time=" + new Date();
    },
    toRegist() {
      this.currentPage = 1;
    },
    onUpdate() {
      this.loadUp = true;
      this.$refs.updateFormRef.validate((valid) => {
        if (valid) {
          this.$store.dispatch("user/loginForgetPwd", this.updateForm).then(() => {
            this.loadUp = false;
            // 跳转到后台首页
            this.$router.push("/dashboard");
          });
        } else {
          this.$message.error("请输入所有内容");
          this.loadUp = false;
          return false;
        }
      });
    },
    onRegister() {
      this.loadRe = true
      this.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          this.$store.dispatch("user/register", this.registerForm).then(() => {
            this.loadRe = false;
            // 跳转到登录页面
            this.currentPage = 0
          });
        } else {
          this.$message.error("请输入所有内容");
          this.loadRe = false;
          return false;
        }
      });
    },
    onBack() {
      this.currentPage = 0
    },

    getLoginCode() {
      var testPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (this.updateForm.phone != null && testPhone.test(this.updateForm.phone)) {
        checkPhone(
            {phone: this.updateForm.phone}
        ).then((res) => {
          if (res === 'true') {
            this.forgetMsg = true;
            sendMsg({
              phone: this.updateForm.phone,
              type: "login"
            })
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  clearInterval(this.timer);
                  this.timer = null;
                  this.forgetMsg = false;
                }
              }, 1000);
            }
          } else {
            alert("该电话号码未注册")
          }
        })
      } else {
        alert("未填写电话号码或号码格式有误")
      }
    },

    getRegisterCode() {
      var testPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (this.registerForm.phone != null && testPhone.test(this.registerForm.phone)) {
        checkPhone({
          phone: this.registerForm.phone
        }).then((res) =>{
          if (res === 'false'){
            this.registerMsg = true;
            sendMsg({
              phone: this.registerForm.phone,
              type: "register"
            })
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  clearInterval(this.timer);
                  this.timer = null;
                  this.registerMsg = false;
                }
              }, 1000);
            }
          }else {
            alert("该号码已被注册")
          }
        })
      } else {
        alert("未填写电话号码或号码格式有误")
      }
    }
  }
}

</script>

<style scoped>
.wave {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: -1;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 7rem;
  padding: 0 2rem;
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


.login-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 18rem;
  padding: 0 2rem;
}

.img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.img img {
  width: 500px;
}

.login-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.login-form {
  width: 360px;
}

.avatar {
  width: 350px;
  height: 80px;
  margin-bottom: 20px;
}

.login-form h2 {
  text-transform: uppercase;
  margin: 15px 0;
  color: #999;
  font: bold 200% Consolas, Monaco, monospace;
}

@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }

  .login-form {
    width: 290px;
  }

  .login-form h2 {
    font-size: 2.4rem;
    margin: 8px 0;
  }

  .img img {
    width: 360px;
  }

  .avatar {
    width: 280px;
    height: 80px;
  }
}

@media screen and (max-width: 968px) {
  .wave {
    display: none;
  }

  .img {
    display: none;
  }

  .login-container {
    grid-template-columns: 1fr;
  }

  .login-box {
    justify-content: center;
  }
}

.myCheckBox .is-checked .el-checkbox__inner {
  background-color: #38d39f;
  border: 1px solid #38d39f;
}

.myCheckBox .is-checked .el-checkbox__inner::after {
  border-color: #ffffff;
}

</style>
<style>
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #38d39f;
}

.el-checkbox__inner:hover {
  border-color: #38d39f;
}

.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #38d39f;
}

*, ::before, ::after {
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #38d39f;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #38d39f;
  border-color: #38d39f;
}

.el-input :focus {
  border-color: #38d39f;
}

.el-button.is-plain:focus, .el-button.is-plain:hover {
  background: #FFF;
  border-color: #38d39f;
  color: #38d39f;
}
</style>
